<template>
  <div class="usercenter-box">
    <div class="common-usercenter-box" style="min-height: 900px;">
      <h6 class="common-title">代理档案管理</h6>
      <div class="myorderbox common-form-set">
        <div
          style="padding:20px; border-bottom:1px solid #CCCCCC">
          <p>我的推广收益：</p>
          <p
            style="color:#FF9900; font-weight:800"
            class="recommend-income">0.00 <span>元</span>
          </p>
        </div>
        <div style="margin:20px;">
          <p>推荐好友完成注册并消费成功即可获得推荐佣金</p>
          <div style="display: flex;">
            <p style=" width:167px; line-height:50px;">复制链接邀请好友注册</p>
            <div style="width:500px; margin-top:10px">
              <input type="text" class="layui-input" id="url" style="display:inline-block; width:390px;" value="http://baota.66skt.cn/reg/code/MDAwMDAwMDAwMH-3eqmxdqJx.html" readonly="readonly">
              <button style=" float:right; width:100px;" class="layui-btn layui-btn-sm btn-copy" data-clipboard-action="copy" data-clipboard-target="#url">点击复制</button>
            </div>
            <div style="clear:both"></div>
          </div>
        </div>
        <el-form class="agent-form" inline>
          <el-form-item label="关键词输入">
            <el-input
              placeholder="请输入关键词">
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-select
              placeholder="客户编号">
              <el-option
                v-for="item in queryTypeOptions"
                :key="item.value"
                :label="item.name"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              placeholder="全部级别">
              <!-- <el-option
                v-for="item in queryTypeOptions"
                :key="item.value"
                :label="item.name"
                :value="item.value">
              </el-option> -->
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              placeholder="全部状态">
              <el-option
                label="开通"
                value="开通">
              </el-option>
              <el-option
                label="禁止"
                value="禁止">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">确认查询</el-button>
          </el-form-item>
        </el-form>

        <el-table
          v-loading="isLoading"
          :data="tableData"
          style="width: 100%">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column label="编号">
          </el-table-column>
          <el-table-column
            label="用户名"
            width="210"
          ></el-table-column>
          <el-table-column label="级别">
          </el-table-column>
          <el-table-column label="余额">
          </el-table-column>
          <el-table-column label="上级">
          </el-table-column>
          <el-table-column label="下级">
          </el-table-column>
          <el-table-column label="状态">
          </el-table-column>
          <el-table-column label="">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import DateFilter from '@/components/dateFilter2'
import pageMixin from '@/mixins/page'
import orderDetailDialog from '@/components/orderDetailDialog'

export default {
  layout: 'webIn4',
  components: {
    DateFilter,
    orderDetailDialog
  },
  mixins: [pageMixin],
  data() {
    return {
      queryTypeOptions: [
        {
          name: '客户编号',
          value: 0,
        },
        {
          name: '用户名',
          value: 1,
        },
      ],
      tableData: [],
      isLoading: false,
    }
  },
  methods: {
    async getList() {
      this.isLoading = true
      const res = await this.$axios.post(
        '/finance/userMoneyDetail/detailPage',
        null,
        { params: this.query }
      )
      if (res.code === 1001 && res.body) {
        this.tableData = res.body.records || []
        this.dataTotal = res.body.total
      }
      this.isLoading = false
    },
    doQuery() {
      const d1val = this.$refs.d1.queryVal()
      this.query = Object.assign(this.query, d1val)
      this.getList()
    },
    async detail(item) {
      const res = await this.$axios.get(
        `/order/order/orderDetails?orderCode=${item.orderID}`
      )
      if (res.code === 1001 && res.body) {
        this.$refs.detail.show(res.body)
      }
    }
  }
}
</script>
<style>
@import 'assets/style/el-adapter.css';
</style>
<style lang="scss" scoped>

// @import 'assets/style/layer.css';
@import 'assets/style/layui.css';
@import 'assets/style/style6/common.css';
// @import 'assets/style/style6/openlogin.css';
// @import 'assets/style/style6/style.css';
// @import 'assets/style/style6/font_1451715_0505c2bxv7b7.css';
// @import 'element-ui/lib/theme-chalk/index.css';

</style>

<style lang="scss">
.usercenter-box .agent-form {
  margin-left: 20px;
  .el-form-item {
    .el-input__inner {
      width: 160px;
    }
  }
}
</style>
